<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Modeling Application</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="assets/favicon-96x96.png">

    <style>
        body,
        html {
            height: 100%;
        }

        .loader-container {
            display: flex;
            flex-direction: column;
            height: 100%;

            align-items: center;
            justify-content: center;
        }

        .loader-item {
            max-height: 100px;
            max-width: 300px;
        }

        .loader-spinner {
            max-height: 300px;
            max-width: 300px;
        }

        .loader-text {
            white-space: nowrap;
            text-align: center;
            position: relative;
        }

        .loader {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .circular {
            animation: rotate 2s linear infinite;
            height: 100px;
            position: relative;
            width: 100px;
        }

        .path {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
            stroke: #B6463A;
            animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
            stroke-linecap: round;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 89, 200;
                stroke-dashoffset: -35;
            }
            100% {
                stroke-dasharray: 89, 200;
                stroke-dashoffset: -124;
            }
        }

        @keyframes color {
            100%,
            0% {
                stroke: #d62d20;
            }
            40% {
                stroke: #0057e7;
            }
            66% {
                stroke: #008744;
            }
            80%,
            90% {
                stroke: #ffa700;
            }
        }
    </style>
</head>

<body>
    <ama-root>
        <div id="loader-container" class="loader-container">
            <div class="loader-spinner">
                <svg class="circular">
                    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
                </svg>
            </div>
            <div class="loader-item">
                <div id="loader-text" class="loader-text">Loading Activiti Modeling Application...</div>
            </div>
            <img src="assets/activiti.png">
        </div>
    </ama-root>
</body>

</html>
